<template>
  <el-dialog :title="$t('partner.hezuo22')" :visible.sync="dialogShow" top="10vh" width="561px">
    <div class="patientAdd_inner">
      <el-select
        v-model="form.deptIds"
        :loading="loading"
        :placeholder="$t('partner.hezuo23')"
        :remote-method="getList"
        clearable
        filterable
        multiple
        remote
        :reserve-keyword="false"
        @blur.native.capture="onSelectBlur"
        :close-on-click-modal="false"
      >
        <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <!-- <el-button type="primary" style="margin-left: 20px;" icon="el-icon-search" :size="optionButtonSize"
                  @click="cancleHandle">{{ $t('add.add123') }}</el-button> -->
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button :size="optionButtonSize" plain @click="cancleHandle">{{
        $t('partner.hezuo24')
      }}</el-button>
      <el-button :size="optionButtonSize" type="primary" @click="submitHandle">{{
        $t('partner.hezuo25')
      }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
// const userOrganizedType = window.localStorage.getItem('user_organizedType');

export default {
  name: 'BLZMasterIndex',

  data() {
    return {
      dialogShow: false,
      loading: false,
      form: {
        deptIds: [],
      },
      options: [],
      allName: [],
      tempOptions: [],
    };
  },

  created() {
    // this.getList()
  },

  methods: {
    onSelectBlur() {
      this.options.forEach((item) => {
        this.tempOptions.push(item);
      });
      setTimeout(() => {
        if (this.form.deptIds.length === 0) {
          this.options = [];
        }
      }, 500);
    },
    getList(queryStr) {
      if (queryStr !== '' && queryStr !== undefined && queryStr !== null) {
        this.loading = true;
        this.$http
          .get(`/sys/organized/getOrganizedList?organizedType=2&queryType=1&name=${queryStr}`)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              this.$message.error(res.msg);
            } else {
              this.options = res.data;
            }
          })
          .catch((err) => {
            console.log('err', err);
          })
          .finally(() => (this.loading = false));
      } else {
        this.options = [];
      }
      // const type = userOrganizedType == 2 ? 1 : 2;
      // if (window.localStorage.getItem("user_organizedType") == 2) {
      //     type = 1
      // } else {
      //     type = 2
      // }
    },
    // 取消
    cancleHandle() {
      this.dialogShow = false;
      this.form = {
        deptIds: [],
      };
    },
    // 确定
    submitHandle() {
      let allName = [];
      if (this.form.deptIds.length == 0) {
        return this.$message.error(this.$t('partner.hezuo23'));
      }
      this.form.deptIds.forEach((child) => {
        this.tempOptions.forEach((item) => {
          if (item.id == child && !allName.includes(item.name)) {
            allName.push(item.name);
          }
        });
      });
      this.$confirm(
        this.$t('add.add060') + `【${allName}】` + this.$t('add.add061'),
        this.$t('add.add140'),
        {
          confirmButtonText: this.$t('add.add142'),
          cancelButtonText: this.$t('add.add143'),
          type: 'warning',
        },
      )
        .then(async () => {
          this.$http
            .post('/partner/save', this.form)
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message.success(this.$t('partner.hezuo26'));
              this.$emit('getPartnerList');
              this.dialogShow = false;
              this.form = {
                deptIds: [],
              };
              this.tempOptions = [];
              this.allName = [];
            })
            .catch((err) => {
              console.log('err', err);
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('add.add145'),
          });
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.patientAdd_inner {
  .el-select {
    width: 100%;
  }
}
</style>
